<template>
  <ul class="tablist">
    <li
      v-for="i in listLength"
      :key="i"
      :class="['presentation', { 'active': i-1===activeIndex }]"
    >
      <span :class="['dashnav-item', { 'active': i-1===activeIndex }]"></span>
    </li>
  </ul>
</template>
<script type="text/javascript">
  export default {
    props: {
      listLength: {
        type: Number
      },
      activeIndex: {
        type: Number
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tablist {
    text-align: center;
    font-size: 0;
    background-color: transparent;
  }
  .presentation {
    position: relative;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    .dashnav-item {
      display: inline-block;
      width: 0%;
      height: 200%;
      background: #fff;
    }
  }
</style>
